

import React,{ Component } from 'react';

class Arrow extends Component {
    constructor(props) {
        super(props);
        this.state = {
            i: 0,
        }
    }
    clickHandle(i) {
        console.log('点击事件');
        this.setState({
            i: ++i,
        },()=>{
            console.log(this.state.i);
        })
    }
    // clickHandle = (i)=>{
    //     console.log('点击事件');
    //     this.setState({
    //         i: ++i,
    //     },()=>{
    //         console.log(this.state.i);
    //     })
    // }
    clickEvent() {
        //console.log('this',this);
        setTimeout(function(){
            //这里面的this是window，而不是当前组件,
            // 这里有三种方案可以解决这个问题：
            // 1.直接绑定
            // 2.用一个变量存起来
            // 3.用箭头函数
            //console.log('this是',this);
        }.bind(this),1000)
        setTimeout(()=>{
            //console.log('箭头函数',this);
        },0)
        var self = this;
        setTimeout(function() {
            console.log('self',self);
        },0)
    }
    render() {
        let i = 0;
        return (
            <div>
                <div onClick={ this.clickHandle.bind(this,this.state.i) }>
                    arrow
                </div>
                <hr />
                <div onClick={ this.clickEvent.bind(this) }>
                    123
                </div>
            </div>
        )
    }
}
export default Arrow;